<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    #action .act_top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 25px;
    }

    #action .act_top .act_set {
      width: 49%;
    }

    #m3707is2n9ee0000000 {
      padding: 60px 0 150px 0;
    }

    #action {
      width: 63%;
      margin: 0 auto;
    }

    /*#action .act_res .act_set:nth-child(n+1):nth-child(-n+2){*/
    /*    width:49%;*/
    /*    margin-bottom:25px;*/
    /*}*/
    /*#action .act_res .act_set:nth-child(n+1):nth-child(-n+2) .act_txt, #action .act_res .act_set:nth-child(n+1):nth-child(-n+2) .act_tiem{*/
    /*    display: none;*/
    /*}*/
    .act_res {
      display: flex;
      justify-content: space-between;
      /*flex-wrap: wrap;*/
    }

    .act_res_last {
      justify-content: flex-start !important;
    }

    /*.act_res_last .act_set{*/
    /*   margin-right: 1%;*/
    /*}*/
    /*.act_res .act_set:nth-child(n+3):nth-child(-n+6){*/
    .act_res .act_set {
      width: 24%;
      /*height: 413px;*/
      margin-right: 1%;
    }

    .act_res .act_set:nth-child(2) {

      margin-right: 2%;
    }

    .act_res .act_set:nth-child(4) {

      margin-right: 0;
    }

    /*.act_set .act_left{*/
    /*    height: 341px;*/
    /*}*/
    .act_set .act_left img {
      width: 100%;
      height: 100%;
      /*height: 250px;*/
    }

    .act_txt {
      padding: 25px 10px 15px 10px;
      box-sizing: border-box;
      font-size: 18px;
      color: #1a1a1a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .act_tiem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
    }

    .act_tiem span:first-child {
      color: #4d4d4d;
      width: 72px;
      white-space: nowrap;
      overflow: hidden;
    }

    /*
			 * 页数按钮样式
			 */
    .page_div {
      margin-top: 70px;
      margin-bottom: 20px;
      font-size: 15px;
      font-family: "microsoft yahei";
      color: #666666;
      margin-right: 10px;
      padding-left: 20px;
      box-sizing: border-box;
      text-align: center;
    }

    .page_div a {
      min-width: 40px;
      height: 40px;
      text-align: center;
      margin: 0 4px;
      cursor: pointer;
      line-height: 40px;
      color: #999999;
      background-color: #EEEEEE;
      font-size: 13px;
      display: inline-block;
    }

    #firstPage,
    #lastPage {
      width: 50px;
      color: #999999;
      background-color: #EEEEEE;
    }

    #prePage,
    #nextPage {
      width: 70px;
      color: #999999;
      background-color: #EEEEEE;
    }

    .page_div .current {
      background-color: #565656;
      color: #FFFFFF;
    }

    .totalPages {
      margin: 0 10px;
    }

    .totalPages span,
    .totalSize span {
      color: #0073A9;
      margin: 0 5px;
    }
  </style>
</head>

<body>
  <div id="action">
    <div class="act_top">

    </div>
    <div class="act_res">

    </div>

    <div id="page" class="page_div">

    </div>
  </div>

  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

  <script>
    // js

    var page = 1;
    var curPage = 1;
    topspen();
    tspen(page);
    function topspen() {
      $.ajax({
        type: "get", //数据发送的方式（post 或者 get）
        url: "https://open.xiaohucloud.cn/xhyapi/data/newsListByCategoryIds", //要发送的后台地址
        data: {
          ids: "1228",
          limit: "2",
          companyId: "100474",
          top: 1
        },
        dataType: "json", //后台处理后返回的数据格式
        success: function (res) { //ajax请求成功后触发的方法
          if (res.code === 0) {
            console.log(res)
            var tstr = ''
            for (var i = 0; i < res.data.data.length; i++) {
              tstr += `<div class="act_set"><a href="http://geyuciga.com/news/${res.data.data[i].id}.html">
               <div class="act_left"><img src="${res.data.data[i].image}" alt=""></div>
            </a></div>`
            }
            $("#action .act_top").html(tstr);
          }
        }
      })
    }

    function tspen(page) {
      // 规格请求
      $.ajax({
        // https://open.xiaohucloud.cn/xhyapi/product/Cspecs/list?page=1&limit=10&lang=1
        type: "get", //数据发送的方式（post 或者 get）
        url: "https://open.xiaohucloud.cn/xhyapi/data/newsListByCategoryIds", //要发送的后台地址
        data: {
          ids: "1228",
          limit: "4",
          companyId: "100474",
          top: 0,
          page: page
        }, //要发送的数据（参数）格式为{'val1':"1","val2":"2"}
        dataType: "json", //后台处理后返回的数据格式
        success: function (res) { //ajax请求成功后触发的方法
          if (res.code === 0) {
            console.log(res)
            // debugger
            var str = '';
            for (var i = 0; i < res.data.data.length; i++) {
              str += ` <div class="act_set"><a href="http://geyuciga.com/news/${res.data.data[i].id}.html">
               <div class="act_left"><img src="${res.data.data[i].image}" alt=""></div>
               <div class="act_txt">${res.data.data[i].name}</div>
               <div class="act_tiem"><span>${res.data.data[i].add_time}</span><span><img src="https://img.xiaohucloud.com/res/100474/2020/11/20/100474-ufFDeS.png" alt=""></span></div>
            </a></div>`
            }
            $("#action .act_res").html(str);
            $("#page").paging({
              pageNo: curPage,
              totalPage: res.data.last_page,
              totalSize: res.data.total,
              callback: function (num) {
                curPage = num;
                console.log(num)
                tspen(num)
              }
            })

            if ($('#action .act_res .act_set').length < 4) {
              console.log('最后一页');
              console.log($('#action .act_res .act_set').length);
              console.log('最后一页');

              $("#action .act_res").addClass('act_res_last');

            } else {
              $("#action .act_res").removeClass('act_res_last');
            }


          } else {

          }
        }

      });
    }

    // 分页插件代码
    (function ($, window, document, undefined) {
      //定义分页类
      function Paging(element, options) {
        this.element = element;
        //传入形参
        this.options = {
          pageNo: options.pageNo || 1,
          totalPage: options.totalPage,
          totalSize: options.totalSize,
          callback: options.callback
        };
        //根据形参初始化分页html和css代码
        this.init();
      }
      //对Paging的实例对象添加公共的属性和方法
      Paging.prototype = {
        constructor: Paging,
        init: function () {
          this.creatHtml();
          this.bindEvent();
        },
        creatHtml: function () {
          var me = this;
          var content = "";
          var current = me.options.pageNo;
          var total = me.options.totalPage;
          var totalNum = me.options.totalSize;
          content += "<a id=\"firstPage\">首页</a><a id='prePage'>上一页</a>";
          //总页数大于6时候
          if (total > 6) {
            //当前页数小于5时显示省略号
            if (current < 5) {
              for (var i = 1; i < 6; i++) {
                if (current == i) {
                  content += "<a class='current'>" + i + "</a>";
                } else {
                  content += "<a>" + i + "</a>";
                }
              }
              content += ". . .";
              content += "<a>" + total + "</a>";
            } else {
              //判断页码在末尾的时候
              if (current < total - 3) {
                for (var i = current - 2; i < current + 3; i++) {
                  if (current == i) {
                    content += "<a class='current'>" + i + "</a>";
                  } else {
                    content += "<a>" + i + "</a>";
                  }
                }
                content += ". . .";
                content += "<a>" + total + "</a>";
                //页码在中间部分时候	
              } else {
                content += "<a>1</a>";
                content += ". . .";
                for (var i = total - 4; i < total + 1; i++) {
                  if (current == i) {
                    content += "<a class='current'>" + i + "</a>";
                  } else {
                    content += "<a>" + i + "</a>";
                  }
                }
              }
            }
            //页面总数小于6的时候
          } else {
            for (var i = 1; i < total + 1; i++) {
              if (current == i) {
                content += "<a class='current'>" + i + "</a>";
              } else {
                content += "<a>" + i + "</a>";
              }
            }
          }
          content += "<a id='nextPage'>下一页</a>";
          content += "<a id=\"lastPage\">尾页</a>";

          me.element.html(content);
        },
        //添加页面操作事件
        bindEvent: function () {
          var me = this;
          me.element.off('click', 'a');
          me.element.on('click', 'a', function () {
            var num = $(this).html();
            var id = $(this).attr("id");
            if (id == "prePage") {
              if (me.options.pageNo == 1) {
                me.options.pageNo = 1;
              } else {
                me.options.pageNo = +me.options.pageNo - 1;
              }
            } else if (id == "nextPage") {
              if (me.options.pageNo == me.options.totalPage) {
                me.options.pageNo = me.options.totalPage
              } else {
                me.options.pageNo = +me.options.pageNo + 1;
              }

            } else if (id == "firstPage") {
              me.options.pageNo = 1;
            } else if (id == "lastPage") {
              me.options.pageNo = me.options.totalPage;
            } else {
              me.options.pageNo = +num;
            }
            me.creatHtml();
            if (me.options.callback) {
              me.options.callback(me.options.pageNo);
            }
          });
        }
      };
      //通过jQuery对象初始化分页对象
      $.fn.paging = function (options) {
        return new Paging($(this), options);
      }
    })(jQuery, window, document);

  </script>
</body>

</html>